import React from "react";
import { Button,Card, Form, Input, message} from 'antd';
import { useNavigate, Navigate } from "react-router-dom";
import './index.scss';
import {
  POST_Login_Api, // 登录鉴权API
} from '@Api/Permission'

// 创建组件,使用hooks
const LoginIndex =  () => {
  /**
   * @date: 2024-09-10 20:43:54
   * @description: 创建表单实例
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const [Login_Form] = Form.useForm(); 
  const navigate = useNavigate(); 
  /**
   * @date: 2024-10-10 17:01:59
   * @description: 在登录状态下去跳转（重定向）首页
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  if (localStorage.getItem('token')) {
    return <Navigate to='/home' replace/>
  }
  /**
   * @date: 2024-10-10 10:22:47
   * @description: 登录确定
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const Login_Submit = (values) => {
    console.log('登录确定', values)
    POST_Login_Data(values.useName, values.passWord)
  }
  /**
   * @date: 2024-10-10 16:48:25
   * @description:登录鉴权API
   * @author: Forever丿顾北
   * @param { useName| String } 账号
   * @param { passWord| String } 密码
   * @author: Forever丿顾北
   * @version: V1.0.5
  **/
  const POST_Login_Data = (useName, passWord) => {
    /**
     * @date: 2024-08-29 15:19:17
     * @description: 获取表格数据
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    POST_Login_Api({
      useName: useName, // 搜索
      passWord: passWord
    }).then(({data}) => {
      
      if (data.code === 200 ) {
        console.log('登录鉴权API', data.data)
        localStorage.setItem('token', data.data.token) // token
        localStorage.setItem('userInfo', JSON.stringify(data.data.userInfo)) // userInfo
        localStorage.setItem('menu', JSON.stringify(data.data.menu)) // 菜单
        sessionStorage.setItem('tagList', JSON.stringify([{ path: '/', name: 'Home', label: '首页' }])); // 保存 tagList 到 sessionStorage
        sessionStorage.setItem('tagActice', JSON.stringify({ path: '/', name: 'Home', label: '首页' })); // 保存 tagActice 到 sessionStorage
        message.success(
          data.msg, 
          [2],
          navigate('/home') 
        )
      } else {
        message.error(data.msg)
      }
    })
  }
  /**
   * @date: 2024-10-10 10:35:44
   * @description: 登录表单重置
   * @modifyContent:
   * @author: Forever丿顾北
  **/
 const Login_Reset = () => {
    Login_Form.resetFields();
  }
  return (
    <div id="Login_Container">
      <Card hoverable className="login_form_card">
        <h1>登录</h1>
        <Form
          form={Login_Form}
          labelCol={{span: 4}}
          wrapperCol={{span: 20}}
          labelAlign={'right'}
          onFinish={Login_Submit}
        >
          <Form.Item
            label="账号"
            name='useName'
            rules={[
              {required: true, message: '请输入账号'}
            ]}
          >
            <Input placeholder="请输入账号..." allowClear/>
          </Form.Item>
          
          <Form.Item
            label="密码"
            name='passWord'
            rules={[
              {required: true, message: '请输入密码'},
              { min: 6, message: '密码不能少于6位' }
            ]}
          >
            <Input.Password placeholder="请输入用户名..." allowClear/>
          </Form.Item>

          <Form.Item className="login_form_btn_box">
            <div className="login_form_btn">
              <Button type="primary" htmlType="submit">登录</Button>
              <Button onClick={Login_Reset}>重置</Button>
            </div>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default LoginIndex;